<template>
  <el-dialog
    ref="basicDialog"
    class="basic-dialog"
    :visible="visible"
    :title="title"
    :top="top"
    :width="width"
    :modal="showModal"
    :modal-append-to-body="modalAppendToBody"
    :close-on-click-modal="closeOnClickModal"
    :fullscreen="fullscreen"
    :append-to-body="appendToBody"
    :show-close="showClose"
    @close="handleClose"
    @closed="handleClosed"
    @open="handleOpen"
    @opened="handleOpened"
  >
    <slot />
    <div v-if="showFooter" slot="footer">
      <slot name="ft">
        <el-button :loading="loadingBtn" @click="handleClose">{{ closeText }}</el-button>
        <el-button type="primary" :loading="othersLoadingBtn" v-if="showOthersBtn" @click="handleOthers">{{ otherText }}</el-button>
        <el-button type="primary" :loading="others1LoadingBtn" v-if="showOthers1Btn" @click="handleOthers1">{{ other1Text }}</el-button>
        <el-button type="primary" v-preventReClick :loading="loadingBtn" @click="handleOk">{{ okText }}</el-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: {
      type: String,
      default: '',
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    showModal: {
      type: Boolean,
      default: true,
    },
    width: {
      type: [Number, String],
      default: '50%',
    },
    top: {
      type: [Number, String],
      default: '100px',
    },
    loadingBtn: {
      type: Boolean,
      default: false,
    },
    othersLoadingBtn: {
      type: Boolean,
      default: false,
    },
    others1LoadingBtn: {
      type: Boolean,
      default: false,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    appendToBody: {
      type: Boolean,
      default: true,
    },
    modalAppendToBody: {
      type: Boolean,
      default: false,
    },
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },
    closeText: {
      type: String,
      default: '取消',
    },
    okText: {
      type: String,
      default: '保存',
    },
    otherText: {
      type: String,
      default: '其它',
    },
    other1Text: {
      type: String,
      default: '其它',
    },
    handleOpen: {
      type: Function,
      default: () => {},
    },
    handleOpened: {
      type: Function,
      default: () => {},
    },
    handleClose: {
      type: Function,
      default: () => {},
    },
    handleClosed: {
      type: Function,
      default: () => {},
    },
    handleOk: {
      type: Function,
      default: () => {},
    },
    showOthersBtn: {
      type: Boolean,
      default: false,
    },
    showOthers1Btn: {
      type: Boolean,
      default: false,
    },
    handleOthers: {
      type: Function,
      default: () => {},
    },
    handleOthers1: {
      type: Function,
      default: () => {},
    },
  },
  computed: {
    realWidth () {
      if (typeof this.width === 'number') {
        return `${this.width}px`;
      }
      return this.width;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 10px 20px;
}
</style>
